<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <title>Vite App</title>
  <link rel="stylesheet" href="sdk/sdk.css" />
  <link rel="stylesheet" href="sdk/helper.css" />
  <link rel="stylesheet" href="sdk/iconfont.css" />
  <!-- 这是默认主题所需的，如果是其他主题则不需要 -->
  <!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11，如果要支持 IE11 请引用这个 css，并把前面那个删了 -->
  <!-- <link rel="stylesheet" href="sdk-ie11.css" /> -->
  <!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果，所以可能有细节功能用不了，如果发现请报 issue -->
  <style>
    html,
    body,
    .app-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="app"></div>
  <div id="root" class="app-wrapper"></div>

  <script type="module" src="/main.js"></script>
  <script src="sdk/sdk.js"></script>
  <script type="text/javascript">
    (function () {
      let amis = amisRequire('amis/embed');
      // 通过替换下面这个配置来生成不同页面
      let amisJSON = {
        type: 'page',
        title: '表单页面',
        initApi: "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/page/initData",
        toolbar: [
          {
            type: "form",
            panelClassName: "mb-0",
            title: "",
            body: [
              {
                type: "select",
                label: "",
                name: "businessLineId",
                selectFirst: true,
                mode: "inline",
                options: [
                  "李阳IP 两格漫画",
                  "小白IP 截图挑战"
                ],
                checkAll: false
              },
              {
                type: "button",
                label: "新建报表",
                actionType: "ajax",
                api: "delete:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/${ids|raw}",
              }
            ],
          }
        ],
        body: {
          type: "crud",
          api: "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample",
          mode: "list",
          draggable: true,
          saveOrderApi: {
            url: "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/saveOrder"
          },
          orderField: "weight",
          filter: {
            title: "条件搜索",
            submitText: "",
            type: "flex",
            direction: "column",
            body: {
              direction: "column",
              {
        "type": "flex",
          "items": [
            {
              type: "button",
              label: "全部",
              actionType: "ajax",
              api: "delete:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/${ids|raw}",
            },
            {
              type: "button",
              label: "内心小孩",
              actionType: "ajax",
              api: "delete:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/${ids|raw}",
            },
            {
              type: "button",
              label: "小兰和他的朋友们",
              actionType: "ajax",
              api: "delete:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/${ids|raw}",
            },
            {
              type: "button",
              label: "小雄虫",
              actionType: "ajax",
              api: "delete:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/${ids|raw}",
            },
          ]
      }

    },
      bulkActions: [
        {
          label: "批量删除",
          actionType: "ajax",
          api: "delete:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/${ids|raw}",
          confirmText: "确定要批量删除?",
          type: "button",
          level: "danger"
        },
        {
          label: "批量修改",
          actionType: "dialog",
          level: "info",
          type: "button",
          dialog: {
            title: "批量编辑",
            body: {
              type: "form",
              api: "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/bulkUpdate2",
              body: [
                {
                  type: "hidden",
                  name: "ids"
                },
                {
                  type: "input-text",
                  name: "engine",
                  label: "Engine"
                }
              ]
            }
          }
        }
      ],
        quickSaveApi: "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/bulkUpdate",
          quickSaveItemApi: "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/$id",
            headerToolbar: [
              "bulkActions"
            ],
              footerToolbar: [
                "load-more"
              ],
                listItem: {
      actions: [
        {
          type: "button",
          icon: "fa fa-eye",
          actionType: "dialog",
          dialog: {
            title: "查看",
            body: {
              type: "form",
              body: [
                {
                  type: "static",
                  name: "engine",
                  label: "Engine"
                },
                {
                  type: "divider"
                },
                {
                  type: "static",
                  name: "browser",
                  label: "Browser"
                },
                {
                  type: "divider"
                },
                {
                  type: "static",
                  name: "platform",
                  label: "Platform(s)"
                },
                {
                  type: "divider"
                },
                {
                  type: "static",
                  name: "version",
                  label: "Engine version"
                },
                {
                  type: "divider"
                },
                {
                  type: "static",
                  name: "grade",
                  label: "CSS grade"
                },
                {
                  type: "divider"
                },
                {
                  type: "html",
                  html: "<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
                }
              ]
            }
          }
        },
        {
          type: "button",
          icon: "fa fa-pencil",
          actionType: "dialog",
          dialog: {
            title: "编辑",
            body: {
              type: "form",
              name: "sample-edit-form",
              api: "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/$id",
              body: [
                {
                  type: "input-text",
                  name: "engine",
                  label: "Engine",
                  required: true
                },
                {
                  type: "divider"
                },
                {
                  type: "input-text",
                  name: "browser",
                  label: "Browser",
                  required: true
                },
                {
                  type: "divider"
                },
                {
                  type: "input-text",
                  name: "platform",
                  label: "Platform(s)",
                  required: true
                },
                {
                  type: "divider"
                },
                {
                  type: "input-text",
                  name: "version",
                  label: "Engine version"
                },
                {
                  type: "divider"
                },
                {
                  type: "input-text",
                  name: "grade",
                  label: "CSS grade"
                }
              ]
            }
          }
        },
        {
          type: "button",
          icon: "fa fa-times text-danger",
          actionType: "ajax",
          confirmText: "您确认要删除?",
          api: "delete:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/$id"
        }
      ],
        body: [
          {
            name: "engine",
            label: "Rendering engine",
            sortable: true,
            quickEdit: true,
            labelClassName: "w-sm pull-left text-muted"
          },
          {
            type: "hbox",
            columns: [
              {
                name: "browser",
                label: "Browser",
                labelClassName: "w-sm pull-left text-muted"
              },
              {
                name: "platform",
                label: "Platform(s)",
                labelClassName: "w-sm pull-left text-muted"
              }
            ]
          },
          {
            name: "version",
            label: "Engine version",
            labelClassName: "w-sm pull-left text-muted"
          }
        ]
    }

        }
      };
    let amisScoped = amis.embed('#root', amisJSON, {
      data: {
        myData: '傳入數據'
      },
      context: {
        amisUser: {
          id: 1,
          name: 'test user'
        }
      }
    });
    }) ();
  </script>
</body>

</html>
